<template>
	<view class="container">
		<!-- 个人信息 -->
		<view class="msg-list">
			<view class="item itemsel" @click="upPhoto">
				<view class="left">
					<view class="txt">头像</view>
				</view>
				<view class="right">
					<image class="photo" :src="photoUrl"></image>
					<uni-icons class="icon" type="forward" size="22" color="#C3C3C3"></uni-icons>
				</view>
			</view>
			<view class="divider"></view>
			<view class="item">
				<view class="left">
					<view class="txt">姓名</view>
				</view>
				<view class="right">
					<input class="uni-input" placeholder="请输入" :value="selfmsgObj.name" @input="nameChange"/>
				</view>
			</view>
			<view class="divider"></view>
			<view class="item" v-if="userType==0">
				<view class="left">
					<view class="txt">工号</view>
				</view>
				<view class="right">
					<text>{{selfmsgObj.number}}</text>
				</view>
			</view>
			<view class="item" v-if="userType==1">
				<view class="left">
					<view class="txt">学号</view>
				</view>
				<view class="right">
					<text>{{selfmsgObj.number}}</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="item itemsel">
				<view class="left">
					<view class="txt">性别</view>
				</view>
				<view class="right">
					<picker @change="bindPickerChange" :value="sexindex" :range="sexarray" range-key="sex">
						<view class="uni-input sexInp">{{sexarray[sexindex].sex}}</view>
						<uni-icons class="icon" type="forward" size="22" color="#C3C3C3" style="vertical-align: middle;"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="divider"></view>
			<view class="item itemsel" v-if="userType==0">
				<view class="left">
					<view class="txt">职称</view>
				</view>
				<view class="right">
					<picker @change="bindPickerChangeTeacher" :value="titleindex" :range="titleList" range-key="keyCode">
						<view class="uni-input sexInp">{{titleList[titleindex].keyCode}}</view>
						<uni-icons class="icon" type="forward" size="22" color="#C3C3C3" style="vertical-align: middle;"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="item" v-if="userType==1">
				<view class="left">
					<view class="txt">身份证</view>
				</view>
				<view class="right">
					<input class="uni-input" placeholder="请输入" :value="selfmsgObj.idcard" @input="idcardChange"/>
				</view>
			</view>
			<view class="divider"></view>
			<view class="item">
				<view class="left">
					<view class="txt">电话</view>
				</view>
				<view class="right">
					<input class="uni-input" type="number" placeholder="请输入" :value="selfmsgObj.telphone" @input="telChange"/>
				</view>
			</view>
			<view class="divider"></view>
			<view class="item">
				<view class="left">
					<view class="txt">邮箱</view>
				</view>
				<view class="right">
					<input class="uni-input" placeholder="请输入" :value="selfmsgObj.email" @input="emailChange"/>
				</view>
			</view>
		</view>
		<button type="primary" class="saveBtn" @click="saveMsg">保存</button>
	</view>
</template>

<script>
	const api = require('@/utils/api.js');
	const util = require("@/utils/util.js");
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				// 文件相关
				userType: null, // 用户类型0教师，1学生
				linkInfo: util.commonUrl() + api.linkloadUrl,  
				photoUrl: "",
				sexarray: [{sex:'男'},{sex: '女'}],
				titleList: [], // 教师职称
				sexindex: 0,
				titleindex: 0,
				selfmsgObj: {}
			}
		},
		methods: {
			/**
			 * 个人信息
			 */
			getselfView(rid,rtype) {
				let urls = "";
				if (rtype == 0) { // 教师
					urls = api.selfmsgViewTeacher;
				} else if (rtype == 1){ // 学生
					urls = api.selfmsgView;
				}
				util.request(urls, {id: rid}).then((res) => {
					if (res.status === 200) {
						this.selfmsgObj = res.datas;
						if (res.datas.photoSource) {
							this.photoUrl = util.commonUrl() + api.linkloadUrl + res.datas.photoSource.moduleName + '/' + res.datas.photoSource.fileNewName;//new Date().getTime()使用时间戳更换每次的修改的图片
						}
						this.sexindex = res.datas.sex;
						if (rtype == 0) {
							this.titleList.forEach((item,index) => {
								if (res.datas.title == item.keyCode) {
									this.titleindex = index;
								}
							})
						}
						
					}
				}).catch(err => {
					
				})
			},
			 /**
			   * 查询职称
			   */
			  searchTitle() {
				  util.request(api.findTeacherTitle).then((res) => {
					if (res.status === 200) {
						this.titleList = res.datas;
					}
				  }).catch(err => {
					
				  })
			  },
			//修改头像
			upPhoto(){
				let that = this;
				uni.chooseImage({
				    count: 1, 
				    sizeType: ['original'], //原图
				    success: function (res) {
						if(res.errMsg === "chooseImage:ok") {
							const imgSrc = res.tempFilePaths[0];
							util.uploadFile(api.uploadUrl, imgSrc).then(res1 => {
								if(res1.status === 200) {
									that.photoUrl = util.commonUrl() + api.linkloadUrl + res1.datas.moduleName + '/' + res1.datas.fileNewName + '?' + new Date().getTime();//new Date().getTime()使用时间戳更换每次的修改的图片
									that.selfmsgObj.photoSource = res1.datas;
									that.selfmsgObj.photo = res1.datas.id;
								}
							})
						}
				    }
				});
			},
			// 性别
			bindPickerChange: function(e) {
				this.sexindex = e.detail.value
				this.selfmsgObj.sex = e.detail.value;
			},
			// 职称
			bindPickerChangeTeacher: function(e) {
				this.titleindex = e.detail.value;
				this.selfmsgObj.title = this.titleList[e.detail.value].keyCode;
			},
			// 姓名修改
			nameChange: function(e) {
				this.selfmsgObj.name = e.target.value;
			},
			// 身份证修改
			idcardChange: function(e) {
				this.selfmsgObj.idcard = e.target.value;
			},
			// 电话修改
			telChange: function(e) {
				this.selfmsgObj.telphone = e.target.value;
			},
			// 邮箱修改
			emailChange: function(e) {
				this.selfmsgObj.email = e.target.value;
			},
			/* 
			  保存修改
			 */
			saveMsg(){
				let urls = "";
				if (this.userType == 0) {
					urls = api.updatemsgViewTeacher;
				}else if (this.userType == 1){
					urls = api.updatemsgView;
				}
				util.request(urls, this.selfmsgObj).then((res) => {
					if (res.status === 200) {
						let users = uni.getStorageSync("user");
						users.photo = this.selfmsgObj.photoSource;
						uni.setStorageSync("user",users)
						uni.showToast({
						    title: res.message,
						    duration: 2000
						});
						setTimeout(()=> {
							uni.navigateBack();
						}, 1500)
					}
				}).catch(err => {
					uni.showToast({
					    title: res.message,
					    duration: 2000
					});
				})
			},
			//返回
			back() {
				uni.navigateBack()
			}

		},
		onLoad(options) {
			this.userType = options.type;
			if (options.type == 0) { // 教师查询职称
				this.searchTitle();
			}
			this.getselfView(options.id, options.type);
		}
	}
</script>

<style>
	.msg-list {
		margin:20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	
	.saveBtn{
		width: 96%;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 30rpx;
		margin-top:80rpx;
		background: #0369D6;
	}

	.item {
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 0;
		padding-right: 20rpx;
		align-items: center;
	}
	
	.itemsel{
		padding-right: 6rpx;
	}

	.item .left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.left .txt {
		font-size: 30rpx;
		color: #666;
		margin-left: 18rpx;
	}


	.item .right {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: right;
		font-size: 30rpx;
		color: #262626;
	}
	
	.item .right input {
		font-size: 26rpx;
		color: #333;
		width:100%;
		margin:0;
		padding:20rpx;
		border:none;
	}
	/deep/ .item .right .uni-input-input,/deep/ .item .right.uni-input-placeholder {
		color: #262626;
	}


	.item .right .photo {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.item .right .txt {
		font-size: 26rpx;
	}

	.divider {
		background-color: #F2F2F2;
		height: 1rpx;
		width: 100%;
	}
	
	.sexInp{
		display: inline-block;
		position: relative;
		top: 4rpx;
	}
</style>
